<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100 h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded shadow-md w-full max-w-md">
  <h2 class="text-2xl font-bold mb-4 text-center">登录</h2>
  <form id="loginForm">
    <div class="mb-4">
      <label for="loginUsername" class="block text-gray-700 font-bold mb-2">用户名</label>
      <input type="text" id="loginUsername" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500" required>
    </div>
    <div class="mb-4">
      <label for="loginPassword" class="block text-gray-700 font-bold mb-2">密码</label>
      <input type="password" id="loginPassword" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500" required>
    </div>
    <div class="mb-4">
      <label for="userType" class="block text-gray-700 font-bold mb-2">用户类型</label>
      <select id="userType" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
        <option value="student">学生</option>
        <option value="admin">管理员</option>
      </select>
    </div>
    <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue active:bg-blue-800">登录</button>
  </form>
  <div id="loginMessage" class="mt-4 text-center"></div>
  <div class="mt-4 text-center">
    <a href="register.html" class="text-blue-500 hover:underline">没有账号？注册</a>
  </div>
</div>

<script>
  const loginForm = document.getElementById('loginForm');
  const loginMessage = document.getElementById('loginMessage');

  loginForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const username = document.getElementById('loginUsername').value;
    const password = document.getElementById('loginPassword').value;
    const userType = document.getElementById('userType').value;

    try {
      const response = await fetch('login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&userType=${encodeURIComponent(userType)}`
      });

      const result = await response.text();

      if (result === 'Y') {
        loginMessage.textContent = '登录成功！';
        loginMessage.classList.add('text-green-500');
        loginMessage.classList.remove('text-red-500');
        // 登录成功后跳转到 index 页面
        window.location.href = 'index.html';
      } else {
        loginMessage.textContent = '登录失败，请检查用户名和密码。';
        loginMessage.classList.add('text-red-500');
        loginMessage.classList.remove('text-green-500');
      }
    } catch (error) {
      loginMessage.textContent = '发生错误，请稍后重试。';
      loginMessage.classList.add('text-red-500');
      loginMessage.classList.remove('text-green-500');
    }
  });
</script>
</body>

</html>